/**
 * @flow
 * ----
 * https://www.uplabs.com/collections/interaction-library
 */
import React from 'react'
// prettier-ignore
import {
  Text,
  View,
  StyleSheet,
} from 'react-native'

import RxPage from '@com/nav/RxPage'
import RxPicker from '../../components/picker/RxPicker'
import DHConfig from '../../commons/constant/DhConfig'

// prettier-ignore
import {
  RxScrollForm,
  RxFormItem,
  RxFormSelectItem,
} from '../../../packages/react-native-rxform'

const HomeDunHuang = props => {
  const DHConfigCommon = DHConfig.commonConfig
  const _getDefault = key => {
    return key.ops[key.default]
  }
  const [state, setState] = React.useState({
    saveDays: _getDefault(DHConfigCommon.saveDays),
    shenShenDaoDaoDePangZi: _getDefault(DHConfigCommon.shenShenDaoDaoDePangZi),
    shenShenDaoDaoDePangZi2: _getDefault(DHConfigCommon.shenShenDaoDaoDePangZi2),
    qiYiDeShuiChi: _getDefault(DHConfigCommon.qiYiDeShuiChi),
    huaLiDeBaoXiang: _getDefault(DHConfigCommon.huaLiDeBaoXiang),
    tanXianZhe: _getDefault(DHConfigCommon.tanXianZhe),
    keYiDeNanZi: _getDefault(DHConfigCommon.keYiDeNanZi),
    chuXinDeTaoBaoZhe: _getDefault(DHConfigCommon.chuXinDeTaoBaoZhe),
    guaiYiDeShiXiang: _getDefault(DHConfigCommon.guaiYiDeShiXiang),
    yiShouDiaoXiang: _getDefault(DHConfigCommon.yiShouDiaoXiang),
    jinLongDiaoXiang: _getDefault(DHConfigCommon.jinLongDiaoXiang),
    kuWeiDeZhiWu: _getDefault(DHConfigCommon.kuWeiDeZhiWu),
    weiShangSuoDeBaoXiang: _getDefault(DHConfigCommon.weiShangSuoDeBaoXiang),
    shangSuoDeMuXiang: _getDefault(DHConfigCommon.shangSuoDeMuXiang),
    poSunDeAnGe: _getDefault(DHConfigCommon.poSunDeAnGe),
    shouShangDeShiBing: _getDefault(DHConfigCommon.shouShangDeShiBing),
    fanDaoDeXiangLu: _getDefault(DHConfigCommon.fanDaoDeXiangLu),
    zhanHuiDeShuJuan: _getDefault(DHConfigCommon.zhanHuiDeShuJuan),
    zaLuanDeShiDui: _getDefault(DHConfigCommon.zaLuanDeShiDui),
    qiGuaiDeMuPai: _getDefault(DHConfigCommon.qiGuaiDeMuPai),
    laoJiuWuQiDui: _getDefault(DHConfigCommon.laoJiuWuQiDui),
  })

  const onChangeState = (key, value) => {
    setState(prevState => {
      return {...prevState, [key]: value}
    })
  }

  return (
    <RxPage {...props} title='敦煌设置'>
      <RxScrollForm style={styles.content}>
        <View style={styles.space} />
        <RxFormSelectItem
          title={'保留历史数据记录-天数'}
          value={state.saveDays}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.saveDays.title,
              list: DHConfigCommon.saveDays.ops,
              selectValue: state.saveDays,
              onChangeText: t => {
                console.log('picker.保留历史数据记录 value=', t)
                onChangeState('saveDays', t)
              },
            })
            console.log('点击 onpress')
          }}
        />

        <View style={styles.space} />
        <RxFormSelectItem
          title={'神神叨叨的胖子 - 1'}
          value={state.shenShenDaoDaoDePangZi}
          onPress={() => {
            console.log('点击 onpress')
            RxPicker.showSingle({
              title: DHConfigCommon.shenShenDaoDaoDePangZi.title,
              list: DHConfigCommon.shenShenDaoDaoDePangZi.ops,
              selectValue: state.shenShenDaoDaoDePangZi,
              onChangeText: t => {
                console.log('picker.神神叨叨的胖子 - 1 value=', t)
                onChangeState('shenShenDaoDaoDePangZi', t)
              },
            })
          }}
        />
        <RxFormSelectItem
          title={'神神叨叨的胖子 - 2'}
          value={state.shenShenDaoDaoDePangZi2}
          bottomSeparator={'none'}
          onPress={() => {
            console.log('点击 onpress')
            RxPicker.showSingle({
              title: DHConfigCommon.shenShenDaoDaoDePangZi2.title,
              list: DHConfigCommon.shenShenDaoDaoDePangZi2.ops,
              selectValue: state.shenShenDaoDaoDePangZi2,
              onChangeText: t => {
                console.log('picker.神神叨叨的胖子 - 2 value=', t)
                onChangeState('shenShenDaoDaoDePangZi2', t)
              },
            })
          }}
        />

        <View style={styles.space} />
        <RxFormSelectItem
          title={'奇异的水池'}
          value={state.qiYiDeShuiChi}
          bottomSeparator={'none'}
          onPress={() => {
            console.log('点击 onpress')
            RxPicker.showSingle({
              title: DHConfigCommon.qiYiDeShuiChi.title,
              list: DHConfigCommon.qiYiDeShuiChi.ops,
              selectValue: state.qiYiDeShuiChi,
              onChangeText: t => {
                console.log('picker.奇异的水池 value=', t)
                onChangeState('qiYiDeShuiChi', t)
              },
            })
          }}
        />

        <View style={styles.space} />
        <RxFormSelectItem
          title={'华丽的宝箱-打开次数'}
          value={state.huaLiDeBaoXiang}
          bottomSeparator={'none'}
          onPress={() => {
            console.log('点击 onpress')
            RxPicker.showSingle({
              title: DHConfigCommon.huaLiDeBaoXiang.title,
              list: DHConfigCommon.huaLiDeBaoXiang.ops,
              selectValue: state.huaLiDeBaoXiang,
              onChangeText: t => {
                console.log('picker.华丽的宝箱 value=', t)
                onChangeState('huaLiDeBaoXiang', t)
              },
            })
          }}
        />

        <View style={styles.space} />
        <RxFormSelectItem
          title={'敦煌探险者，战胜他们三者其中一人'}
          value={state.tanXianZhe}
          bottomSeparator={'none'}
          onPress={() => {
            console.log('点击 onpress')
            RxPicker.showSingle({
              title: DHConfigCommon.tanXianZhe.title,
              list: DHConfigCommon.tanXianZhe.ops,
              selectValue: state.tanXianZhe,
              onChangeText: t => {
                console.log('picker.敦煌探险者 value=', t)
                onChangeState('tanXianZhe', t)
              },
            })
          }}
        />

        <View style={styles.space} />
        <RxFormSelectItem
          title={'可疑的男子 - 1'}
          value={state.keYiDeNanZi}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.keYiDeNanZi.title,
              list: DHConfigCommon.keYiDeNanZi.ops,
              selectValue: state.keYiDeNanZi,
              onChangeText: t => {
                console.log('picker.可疑的男子 value=', t)
                onChangeState('keYiDeNanZi', t)
              },
            })
          }}
        />
        <RxFormItem title={'可疑的男子 - 2'} value={'接收丹药'} bottomSeparator={'none'} />

        <View style={styles.space} />
        <RxFormSelectItem
          title={'粗心的探宝者'}
          value={state.chuXinDeTaoBaoZhe}
          bottomSeparator={'none'}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.chuXinDeTaoBaoZhe.title,
              list: DHConfigCommon.chuXinDeTaoBaoZhe.ops,
              selectValue: state.chuXinDeTaoBaoZhe,
              onChangeText: t => {
                console.log('picker.粗心的探宝者 value=', t)
                onChangeState('chuXinDeTaoBaoZhe', t)
              },
            })
          }}
        />

        <View style={styles.space} />
        <RxFormSelectItem
          title={'怪异的石像'}
          value={state.guaiYiDeShiXiang}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.guaiYiDeShiXiang.title,
              list: DHConfigCommon.guaiYiDeShiXiang.ops,
              selectValue: state.guaiYiDeShiXiang,
              onChangeText: t => {
                console.log('picker.怪异的石像 value=', t)
                onChangeState('guaiYiDeShiXiang', t)
              },
            })
          }}
        />
        <RxFormSelectItem
          title={'异兽雕像'}
          value={state.yiShouDiaoXiang}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.yiShouDiaoXiang.title,
              list: DHConfigCommon.yiShouDiaoXiang.ops,
              selectValue: state.yiShouDiaoXiang,
              onChangeText: t => {
                console.log('picker.异兽雕像 value=', t)
                onChangeState('yiShouDiaoXiang', t)
              },
            })
          }}
        />
        <RxFormSelectItem
          title={'金龙雕像'}
          value={state.jinLongDiaoXiang}
          bottomSeparator={'none'}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.jinLongDiaoXiang.title,
              list: DHConfigCommon.jinLongDiaoXiang.ops,
              selectValue: state.jinLongDiaoXiang,
              onChangeText: t => {
                console.log('picker.金龙雕像 value=', t)
                onChangeState('jinLongDiaoXiang', t)
              },
            })
          }}
        />

        <Text style={styles.header}>枯萎的植物 - 泉水/露水/冰清水/寒梅蕴水/上古神水</Text>
        <RxFormSelectItem
          title={'枯萎的植物'}
          value={state.kuWeiDeZhiWu}
          bottomSeparator={'none'}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.kuWeiDeZhiWu.title,
              list: DHConfigCommon.kuWeiDeZhiWu.ops,
              selectValue: state.kuWeiDeZhiWu,
              onChangeText: t => {
                console.log('picker.枯萎的植物 value=', t)
                onChangeState('kuWeiDeZhiWu', t)
              },
            })
          }}
        />

        <View style={styles.space} />
        <RxFormSelectItem
          title={'未上锁的宝箱'}
          value={state.weiShangSuoDeBaoXiang}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.weiShangSuoDeBaoXiang.title,
              list: DHConfigCommon.weiShangSuoDeBaoXiang.ops,
              selectValue: state.weiShangSuoDeBaoXiang,
              onChangeText: t => {
                console.log('picker.未上锁的宝箱 value=', t)
                onChangeState('weiShangSuoDeBaoXiang', t)
              },
            })
          }}
        />
        <RxFormSelectItem
          title={'上锁的木箱'}
          value={state.shangSuoDeMuXiang}
          bottomSeparator={'none'}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.shangSuoDeMuXiang.title,
              list: DHConfigCommon.shangSuoDeMuXiang.ops,
              selectValue: state.shangSuoDeMuXiang,
              onChangeText: t => {
                console.log('picker.上锁的木箱 value=', t)
                onChangeState('shangSuoDeMuXiang', t)
              },
            })
          }}
        />

        <View style={styles.space} />
        <RxFormSelectItem
          title={'破损的暗格'}
          value={state.poSunDeAnGe}
          bottomSeparator={'none'}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.poSunDeAnGe.title,
              list: DHConfigCommon.poSunDeAnGe.ops,
              selectValue: state.poSunDeAnGe,
              onChangeText: t => {
                console.log('picker.破损的暗格 value=', t)
                onChangeState('poSunDeAnGe', t)
              },
            })
          }}
        />

        <View style={styles.space} />
        <RxFormSelectItem
          title={'受伤的士兵'}
          value={state.shouShangDeShiBing}
          bottomSeparator={'none'}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.shouShangDeShiBing.title,
              list: DHConfigCommon.shouShangDeShiBing.ops,
              selectValue: state.shouShangDeShiBing,
              onChangeText: t => {
                console.log('picker.受伤的士兵 value=', t)
                onChangeState('shouShangDeShiBing', t)
              },
            })
          }}
        />

        <View style={styles.space} />
        <RxFormSelectItem
          title={'翻倒的香炉'}
          value={state.fanDaoDeXiangLu}
          bottomSeparator={'none'}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.fanDaoDeXiangLu.title,
              list: DHConfigCommon.fanDaoDeXiangLu.ops,
              selectValue: state.fanDaoDeXiangLu,
              onChangeText: t => {
                console.log('picker.翻倒的香炉 value=', t)
                onChangeState('fanDaoDeXiangLu', t)
              },
            })
          }}
        />

        <View style={styles.space} />
        <RxFormSelectItem
          title={'沾灰的书卷'}
          value={state.zhanHuiDeShuJuan}
          bottomSeparator={'none'}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.zhanHuiDeShuJuan.title,
              list: DHConfigCommon.zhanHuiDeShuJuan.ops,
              selectValue: state.zhanHuiDeShuJuan,
              onChangeText: t => {
                console.log('picker.沾灰的书卷 value=', t)
                onChangeState('zhanHuiDeShuJuan', t)
              },
            })
          }}
        />

        <View style={styles.space} />
        <RxFormSelectItem
          title={'杂乱的石碓'}
          value={state.zaLuanDeShiDui}
          bottomSeparator={'none'}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.zaLuanDeShiDui.title,
              list: DHConfigCommon.zaLuanDeShiDui.ops,
              selectValue: state.zaLuanDeShiDui,
              onChangeText: t => {
                console.log('picker.杂乱的石碓 value=', t)
                onChangeState('zaLuanDeShiDui', t)
              },
            })
          }}
        />

        <View style={styles.space} />
        <RxFormSelectItem
          title={'奇怪的木牌'}
          value={state.qiGuaiDeMuPai}
          bottomSeparator={'none'}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.qiGuaiDeMuPai.title,
              list: DHConfigCommon.qiGuaiDeMuPai.ops,
              selectValue: state.qiGuaiDeMuPai,
              onChangeText: t => {
                console.log('picker.奇怪的木牌 value=', t)
                onChangeState('qiGuaiDeMuPai', t)
              },
            })
          }}
        />

        <View style={styles.space} />
        <RxFormSelectItem
          title={'老旧武器堆'}
          value={state.laoJiuWuQiDui}
          bottomSeparator={'none'}
          onPress={() => {
            RxPicker.showSingle({
              title: DHConfigCommon.laoJiuWuQiDui.title,
              list: DHConfigCommon.laoJiuWuQiDui.ops,
              selectValue: state.laoJiuWuQiDui,
              onChangeText: t => {
                console.log('picker.老旧武器堆 value=', t)
                onChangeState('laoJiuWuQiDui', t)
              },
            })
          }}
        />

        <Text style={styles.header}>神秘的老者</Text>
        <RxFormItem title={'当前官衔'} value={''} />
        <RxFormItem title={'多少战力'} value={''} />
        <RxFormItem title={'多少元宝'} value={''} />
        <RxFormItem title={'多少玉璧'} value={''} />
        <RxFormItem title={'得到多少种奖励'} value={''} bottomSeparator={'none'} />

        <Text style={styles.header}>神秘行商</Text>
        <RxFormItem title={'春秋'} value={'不买'} />
        <RxFormItem title={'战国'} value={'不买'} />
        <RxFormItem title={'玄天八卦'} value={'不买'} />
        <RxFormItem title={'红羽穿心箭'} value={'不买'} />
        <RxFormItem title={'卧龙沾星盘'} value={'不买'} bottomSeparator={'none'} />
      </RxScrollForm>
    </RxPage>
  )
}

export default HomeDunHuang

const styles = StyleSheet.create({
  container: {flex: 1},
  content: {paddingHorizontal: 10},
  header: {
    paddingHorizontal: 10,
    marginTop: 15,
    marginBottom: 5,
  },
  space: {
    height: 15,
  },
})
